<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .k {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 100px;
        top: 100px;
        z-index: 100;
      }
      .drop {
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        left: 200px;
        top: 200px;
        z-index: 100;
      }
      #drag_img {
        width: 50px;
        background: blue;
        border-radius: 50%;
        text-align: center;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="k" draggable="true">语文</div>

    <div class="drop">拖到这里来</div>

    <div id="drag_img">语文</div>

    <script>
      // 文档:https://www.cnblogs.com/guo-siqi/p/16358323.html
      // 事件类型	    事件处理器	触发时机	绑定元素
      // dragstart	    ondragstart	当开始拖动一个元素时	拖拽
      // drag	        ondrag	当元素被拖动期间按一定频率触发	拖拽
      // dragend	    ondragend	当拖动的元素被释放（🖱️松开、按键盘 ESC）时	拖拽
      // dragenter	    ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件	放置
      // dragexit	    ondragexit	当元素变得不再是拖动操作的选中目标时	放置
      // dragleave	    ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件	放置
      // dragover	    ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件	放置
      // drop	        ondrop	当拖动元素在可释放目标元素上释放时	放置
      const k = document.querySelector('.k');
      const d = document.querySelector('.drop');
      k.addEventListener('dragstart', function (e) {
        console.log('start', e.target, e.dataTransfer);
        e.dataTransfer.effectAllowed = 'copy'; // 修改鼠标样式
        const img = new Image(0, 0);
        e.dataTransfer.setDragImage(document.getElementById('drag_img'), 0, 0); // 修改拖拽时的的阴影图片
      });
      k.addEventListener('drag', function (e) {
        // console.log('drag', e.target);
      });

      d.addEventListener('dragover', function (e) {
        e.preventDefault();

        console.log('dragover', e.target);
      });
      d.addEventListener('drop', function (e) {
        console.log('drop', e.target);
      });
      // 更多内容 抖音收藏
    </script>
  </body>
</html>
